<template>
    <div :class="{mask:mask}">
        <div class="model" ref="model" :style="{ top: top + 'px', left: left + 'px', width: _width + 'px', height: _height + 'px' }">
            <!-- 标题 -->
            <div class="model_header" ref="header">
                <span>{{ title }}</span>
                <span @click="cancel">X</span>
            </div>
            <!-- 内容 -->
            <div class="model_content">
                <slot></slot>
            </div>
            <!-- 底部按钮 -->
            <div class="model_footer" v-if="footerVisible">
                <button @click="cancel">取消</button>
                <button @click="ok">确定</button>
            </div>
            <i class="stretch"></i>
        </div>
    </div>
</template>

<script>
/* eslint-disable */
export default {
	data() {
		return {
			_width: 0,
			_height: 0
		}
	},
	props: {
		mask: {
			type: Boolean,
			default() {
				return false
			}
		},
		title: {
			type: String,
			default() {
				return ''
			}
		},
		footerVisible: {
			type: Boolean,
			default() {
				return true
			}
		},
		width: {
			type: Number,
			default() {
				return 500
			}
		},
		height: {
			type: Number,
			default() {
				return 300
			}
		},
		top: {
			type: Number,
			default() {
				return 270
			}
		},
		left: {
			type: Number,
			default() {
				return 650
			}
		}
	},
	mounted() {
		// 窗口移动核心代码
		this._width = this.width
		this._height = this.height
		var dragging = false
		var position = null
		var model = this.$refs.model
		var header = this.$refs.header
		header.addEventListener('mousedown', function(e) {
			dragging = true
			position = [e.clientX, e.clientY]
		})
		document.addEventListener('mousemove', function(e) {
			if (dragging === false) {
				return
			}
			const x = e.clientX
			const y = e.clientY
			const deltaX = x - position[0]
			const deltaY = y - position[1]
			const left = parseInt(model.style.left || this.left)
			const top = parseInt(model.style.top || this.top)
			model.style.left = left + deltaX + 'px'
			model.style.top = top + deltaY + 'px'
			position = [x, y]
		})
		document.addEventListener('mouseup', function() {
			dragging = false
		})
	},
	watch: {
		width(val) {
			this._width = val
		},
		height(val) {
			this._width = val
		}
	},
	methods: {
		ok() {
			this.$emit('ok')
		},
		cancel() {
			this.$emit('cancel')
		}
	}
}
</script>

<style>
.mask {
	position: fixed;
	z-index: 20;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.model {
	border: 1px solid #f1f1f1;
	position: absolute;
	display: flex;
	flex-direction: column;
	border-radius: 4px 4px 0px 0px;
}
.model_content {
	width: 100%;
	flex-grow: 1;
	background: #fff;
	overflow: auto;
}
.model_header {
	width: 100%;
	height: 30px;
	display: flex;
	justify-content: space-between;
	border-radius: 4px 4px 0px 0px;
	align-items: center;
	box-sizing: border-box;
	background: #e4e4e4;
}
.model_header > span:nth-child(1) {
	flex-grow: 1;
	padding-left: 20px;
	cursor: all-scroll;
}
.model_header > span:nth-child(2) {
	padding: 0px 20px;
	cursor: pointer;
}
.model_footer {
	position: absolute;
	box-sizing: border-box;
	background: #e4e4e4;
	bottom: 0px;
	width: 100%;
	height: 30px;
	padding: 3px 0;
	padding-right: 28px;
	text-align: right;
}
.model_footer > button {
	width: 55px;
	height: 25px;
	margin-right: 5px;
	border: 1px solid rgb(197, 197, 197);
	cursor: pointer;
}
.stretch {
	position: absolute;
	bottom: 0px;
	right: 0px;
	width: 14px;
	height: 14px;
	cursor: nw-resize;
	background: url(../../assets/model_right_bottom.png) no-repeat;
	background-size: cover;
}
</style>
